
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>按钮 - 光年(Light Year Admin V5)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
</head>
  
<body>
<div class="container-fluid">
  
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">考务编排程序</div></header>
        <div class="card-body">
          <!-- <h6>考务相关：</h6>
          <p>可使用 <code>.btn-w-xs</code>, <code>.btn-w-sm</code>, <code>.btn-w-md</code>, <code>.btn-w-lg</code> 和 <code>.btn-w-xl</code> 类指定按钮宽度。</p> -->
          <!-- <div class="lyear-divider">考试设置</div> -->
          <h6>考试设置：</h6>
          <div class="example-box">
            <a class="btn btn-purple btn-w-lg" href="#" role="button">考试人数设置</a>
            <a class="btn btn-purple btn-w-lg" href="#" role="button">输出考场标题</a>
            <a class="btn btn-purple btn-w-lg" href="#" role="button">输出考场人数</a>
            <a class="btn btn-purple btn-w-lg" href="#" role="button">考试学生分类数量</a>
            <a class="btn btn-purple btn-w-lg" href="#" role="button">座位安排表网页版</a>
          </div>
          <h6>座位导出</h6>
          <!-- <div class="lyear-divider">座位导出</div> -->
          <div class="example-box">
            <a class="btn btn-success" href="#" role="button">校内考试导出座位表（原座位S型）</a>
            <a class="btn btn-success" href="#" role="button">校内考试导出座位表（前后不同年级）</a>
            <a class="btn btn-success" href="#" role="button">校内考试导出座位表（在本班教室）</a>
          </div>
          <h6>学生信息相关</h6>
          <!-- <div class="lyear-divider">学生信息相关</div> -->
          <div class="example-box">
            <a class="btn btn-pink btn-w-lg" href="#" role="button">输出借读名单</a>
            <a class="btn btn-pink btn-w-lg" href="#" role="button">临时学籍号名单</a>
            <a class="btn btn-pink btn-w-lg" href="#" role="button">读取报名表</a>
            <a class="btn btn-pink btn-w-lg" href="#" role="button">统计分析</a>
            <a class="btn btn-pink btn-w-lg" href="#" role="button">期末成绩查询日志</a>
            <a class="btn btn-pink btn-w-lg" href="https://file.fe80.cn/pages/yuanbaoshuju/22DUN/index.html" target="_blank" role="button">学生信息统计</a>
          </div>

          <!-- <div class="row">
            <div class="col-lg-6">
              <div class="lyear-divider">按钮大小</div>
              <p>需要更大或更小的按钮吗？使用 <code>.btn-lg</code> 或 <code>.btn-sm</code> 类可以设置按钮的不同尺寸</p>
              <div class="example-box">
                <button type="button" class="btn btn-primary btn-lg">大的按钮</button>
                <button type="button" class="btn btn-primary btn-sm">小的按钮</button>
              </div>
            </div>
            <div class="col-lg-6">
              <div class="lyear-divider">禁用状态</div>
              <p>通过为 <code>&lt;button&gt;</code> 元素设置 <code>disabled</code> 属性（此属性是布尔类型的）可以使按钮看起来处于禁用状态。处于禁用状态的按钮被设置了 <code>pointer-events: none</code> 属性，以防止触发鼠标悬停（hover）和活动（active）状态。</p>
              <div class="example-box">
                <button type="button" class="btn btn-primary" disabled>主色按钮</button>
                <button type="button" class="btn btn-secondary" disabled>灰色按钮</button>
                <a href="#!" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">主色链接</a>
                <a class="btn btn-secondary disabled" role="button" aria-disabled="true">灰色链接</a>
              </div>
            </div>
            <div class="col-lg-12">
              <div class="lyear-divider">块级元素按钮</div>
              <p>创建块级元素按钮，不再像 Bootstrap 4 一样给按钮指定相关的类，这里是在父元素上指定 <code>display</code> 和 <code>gap</code> 相关。</p>
              <div class="border-example">
                <div class="d-grid gap-2">
                  <button class="btn btn-primary" type="button">按钮</button>
                  <button class="btn btn-primary" type="button">按钮</button>
                </div>
              </div>
              <pre>&lt;div class="d-grid gap-2"&gt;
  &lt;button class="btn btn-primary" type="button"&gt;按钮&lt;/button&gt;
  &lt;button class="btn btn-primary" type="button"&gt;按钮&lt;/button&gt;
&lt;/div&gt;</pre>
              <p>在这里，我们创建了一个响应式变化，从垂直堆叠的按钮开始，直到 <code>md</code> 断点，其中 <code>.d-md-block</code> 取代了 <code>.d-grid</code> 类，从而使 <code>gap-2</code> 类无效。调整浏览器大小以查看它们的变化。</p>
              <div class="border-example">
                <div class="d-grid gap-2 d-md-block">
                  <button class="btn btn-primary" type="button">按钮</button>
                  <button class="btn btn-primary" type="button">按钮</button>
                </div>
              </div>
              <pre>&lt;div class="d-grid gap-2 d-md-block"&gt;
  &lt;button class="btn btn-primary" type="button"&gt;按钮&lt;/button&gt;
  &lt;button class="btn btn-primary" type="button"&gt;按钮&lt;/button&gt;
&lt;/div&gt;</pre>
              <p>可以使用网格列宽类调整块按钮的宽度。例如，对于半宽“块级元素按钮”，使用 <code>.col-6</code> 和 <code>.mx-auto</code> 将其水平居中放置。</p>
              <div class="border-example">
                <div class="d-grid gap-2 col-6 mx-auto">
                  <button class="btn btn-primary" type="button">按钮</button>
                  <button class="btn btn-primary" type="button">按钮</button>
                </div>
              </div>
              <pre>&lt;div class="d-grid gap-2 col-6 mx-auto"&gt;
  &lt;button class="btn btn-primary" type="button"&gt;按钮&lt;/button&gt;
  &lt;button class="btn btn-primary" type="button"&gt;按钮&lt;/button&gt;
&lt;/div&gt;</pre>
              <p>当按钮水平时，可使用其他类调整按钮的对齐方式。这里我们以前面的响应示例为例，在按钮上添加了一些 <code>flex</code> 类和 <code>margin</code>相关类，以便在按钮不再堆叠时右对齐按钮。</p>
              <div class="border-example">
                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                  <button class="btn btn-primary me-md-2" type="button">按钮</button>
                  <button class="btn btn-primary" type="button">按钮</button>
                </div>
              </div>
              <pre>&lt;div class="d-grid gap-2 d-md-flex justify-content-md-end"&gt;
  &lt;button class="btn btn-primary me-md-2" type="button"&gt;按钮&lt;/button&gt;
  &lt;button class="btn btn-primary" type="button"&gt;按钮&lt;/button&gt;
&lt;/div&gt;</pre>
            </div>
          </div> -->
          
          <div class="callout callout-warning">Bootstrap 5的文档中有关于按钮插件的说明，对于这个按钮插件目前我也不太明白具体在实际开发中有什么用处，这里就不再说明，有兴趣的小伙伴自行查看官方的文档。</div>
          
        </div>
      </div>
    </div>
        
  </div>
  
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
</body>
</html>